<!DOCTYPE html>
<html>
    <head>
		<title>视频监控</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<style>
			.nav-tabs{background: #FFF;margin-top: 50px;padding-left: 15px;}
			.nav > li > a:focus, .nav > li > a:hover{background: #FFF;}
			.monitor_top{height:24px;padding: 0;}
			.monitor_left , .monitor_right{padding: 0;height:24px;line-height: 24px;bottom: 0;}
			.monitor_left{padding-left: 3px;}
			.monitor_right{right: 3px;text-align: right;}
			.title_top{text-align: center;}
			.rq{padding: 0;}
			#video{width:98%;height:200px;background-color:#000000;margin:auto;margin-top:15%;}
			.monitor_img{height:100px;}
		</style>    
    </head>
	<body class="">
		<div class="col-xs-12 title_top">
			<div class="col-xs-3 rq back">
				<a href="#">
					<div style="float: left;"><img src="images/icon_left.png"/></div>
					<div style="float: left;margin-top: 2px;color:#FFFFFF">返回</div>
				</a>
			</div>
			<div class="col-xs-6 live_name">视频监控</div>
		</div>
		<div id="video">
			
		</div>
		<div id="myTabContent" class="col-xs-12 tab-content">
			<div class="tab-pane fade in active col-xs-12 " id="one">
				<div class="col-xs-12 monitor video_lists">
					
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script src="js/jquery.min.js"></script>
<script >
	function live_init(url,name){
		$(".live_name").text(name);
		video = new plus.video.VideoPlayer('video',{
			src:url
		});
		video.setOptions({src:url});
		video.play();
	}
	mui.plusReady(function () {
		var token = get_token();
		var params = get_ws();
		if(!params.projectID){
			_mui_dialog._toast('请勿非法访问');
			return false;
		}
		live_init(params.realPlayUrl,params.name);
		//实时监控
		var data = {};
		data.api = 'video-get-device-info';
		data.token = token;
		data.projectID = params.projectID;
		mui.ajax(project_cofnig.service_url, {
				async: true,
				dataType: 'json',
				data: data,
				success: function (ref) {
					if(ref.code == 0){
						var _html = '';
						mui.each(ref.data.videos,function(i,v){
							_html += '<div class="col-xs-6 video_detail" data-url="'+v.realPlayUrl+'" data-name="'+v.name+'" >';
							_html += '<img class="monitor_img" src="'+v.pictureUrl+'" data-realplayurl="'+v.realPlayUrl+'" />';
							_html += '<p class="monitor_text">'+v.name+'</p>';
							_html += '</div>';
						});
						$(".video_lists").html(_html);
					}
				}
		});
		mui(".title_top").on("tap",".back",function(){
			mui.back();
		});
		mui(".video_lists").on("tap",".video_detail",function(){
			var _this = $(this);
			var _url = _this.data("url");
			var _name = _this.data("name");
			live_init(_url,_name);
		});
	});
</script>
		 